<template>
  <div>
    <el-header class="header">
      <div class="collapse">
        <el-icon size="20" @click="handleCollapse" v-if="isCollapse">
          <Expand />
        </el-icon>

        <el-icon size="20" @click="handleCollapse" v-else>
          <Fold />
        </el-icon>
      </div>

      <div class="headerRight">
        <el-dropdown>
          <span class="user">
            {{ userStore.token }}
            <el-icon class="el-icon--right">
              <arrow-down />
            </el-icon>
          </span>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdownItem @click="openBaseSetting">
                基础设置
              </el-dropdownItem>
              <el-dropdownItem @click="logout">退出登录</el-dropdownItem>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </el-header>

    <el-dialog
      v-model="dialogVisible"
      title="基础设置"
      width="30%"
      @beforeClose="
        {
          handleClose;
        }
      "
    >
      <el-scrollbar class="diolgConten">
        <div class="color">
          <span>主题颜色</span>
          <el-colorPicker
            v-model="primary"
            :predefine="colorList"
            @change="changePrimary"
          />
        </div>
      </el-scrollbar>

      <template #footer>
        <span>
          <el-button @click="cancel">取消</el-button>
          <el-button type="primary" @click="cancel"> 确定 </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts" name="login">
// import IconMap from "@/config/sideNavIconMap";
import { useGlobalStore } from "@/stores/modules/global";
import { computed, onMounted, ref } from "vue";
import { storeToRefs } from "pinia";
import { DEFAULT_PRIMARY, LOGIN_URL } from "@/config";
import { useTheme } from "@/hooks/useTheme";
import { useUserStore } from "@/stores/modules/user";
import { useRouter } from "vue-router";
import { useTabsStore } from "@/stores/modules/tabs";

const globalStore = useGlobalStore();
const router = useRouter();
const userStore = useUserStore();
const tabsStore = useTabsStore();
const isCollapse = computed(() => globalStore.isCollapse);
const { primary } = storeToRefs(globalStore);
const { changePrimary } = useTheme();
const handleCollapse = () => {
  globalStore.setGlobalState("isCollapse", !globalStore.isCollapse);
  console.log(globalStore.isCollapse);
};
// 预定义主题颜色
const colorList = [
  DEFAULT_PRIMARY,
  "#daa96e",
  "#0c819f",
  "#409eff",
  "#27ae60",
  "#ff5c93",
  "#e74c3c",
  "#fd726d",
  "#f39c12",
  "#9b59b6",
];

const openBaseSetting = () => {
  dialogVisible.value = true;
};

const dialogVisible = ref(false);

const handleClose = () => {
  console.log(5);
};

const cancel = () => {
  dialogVisible.value = false;
};

const logout = () => {
  userStore.token = "";
  tabsStore.tabsMenuList = [];
  localStorage.removeItem("user");
  localStorage.removeItem("tabs");
  router.push(LOGIN_URL);
};
onMounted(() => {
  changePrimary(globalStore.primary);
});
</script>

<style scoped lang="scss">
@import "./header.module.scss";
</style>
